js原生操作select、radio 、checkbox

select、radio 、checkbox常见操作

1. select常见操作

2. radio常见操作

3. select常见操作

html代码

 <select class="select">
        <option value="select" selected="selected">下拉框</option>
        <option value="radio">单选框</option>
        <option value="checkbox">多选框</option>
    </select>
    <div class="container">
        <input class="radio" name="programinglanguage" type="radio" value="java" />java
        <input class="radio" name="programinglanguage" type="radio" value="php" />php
        <input class="radio" name="programinglanguage" type="radio" checked="checked"  value=".net" />.net
        <input class="radio" name="programinglanguage" type="radio" value="c++" />c++
    </div>
    <div class="container">
        <input class="checkbox" name="frontEnd" type="checkbox" checked="checked" value="react" />react
        <input class="checkbox" name="frontEnd" type="checkbox" value="vue" />vue
        <input class="checkbox" name="frontEnd" type="checkbox" value="javascript" />javascript
        <input class="checkbox" name="frontEnd" type="checkbox" value="sass" />sass
        <input class="checkbox" name="frontEnd" type="checkbox" value="less" />less
    </div>

js代码

• select常见操作

        /**
         * select常见操作
         */
        var selectObj  = document.querySelector('.select');
        var index = selectObj.selectedIndex;
        /**
         * 获取选中value值
         * 第一种通过select对象.value获取
         * 第二种通过select选中的下标来获取value获取
         */
        var selectValue = selectObj.value;
        var selectValue_2 = selectObj.options[index].value;
        /**
         * 获取选中文本值
         * 通过select选中的下标来获取选中文本值
         */
        var selectText = selectObj.options[index].text;
        /**
         * 设置select选中项
         * 知道options的value值或者下标或者文本值
         * 下面代码只列出根据value来选中select
         */
        var setSelect = 'radio';
        var selectOptions = selectObj.options;//获取select下所有的option
        for(var i = 0;i < selectOptions.length;i++){
            //selectOptions[i].text 获取文本值
            if(selectOptions[i].value == setSelect){
                selectObj[i].setAttribute('selected','selected');
                break;
            }
        }
        /**
         * 添加option
         * 格式：new Option('text(文本值)','value(value值)');
         */
        selectObj.add(new Option('单行文本输入框','text'));
        /**
         * 删除option
         * 思路：删除option需要获得要删除option的下标，可通过循环判断出塞选出想要的option
         * 注意：如果select没有找到要删除option的下标，select将保持不变，控制台不会报错

         */
        var deleteIndex = 0;
        selectObj.options.remove(deleteIndex);
        /**
         * 修改option
         * 思路：修改option需要获得要修改option的下标
         * 注意：如果要修改的updateIndex大于select的option长度，就会出现空的option
         * 缺点：和删除option一起用会保留空的option
         */
        var updateIndex = 2;
        selectObj.options[updateIndex]=new Option('多行行文本输入框','textarea');

• radio常见操作

        /**
         * radio常见操作
         * document.querySelectorAll('.class、#id')与document.getElementsByName('name值')能达到一样的效果，代码将用前者造轮子
         * 缺点：操作需要循环去定位然后在操作
         *
         */
        var radioObj = document.querySelectorAll('.radio');
        for(var i = 0;i < radioObj.length;i++){
            if(radioObj[i].checked == true){
                console.log(radioObj[i].value);//获取选中的值
                radioObj[i].checked = false;//设置取消选中
            }else{
               //radioObj[i].checked = true;//设置选中
            }
        }
        

• CheckBox常见操作

       /**
         * checkbox常见操作
         * document.querySelectorAll('.class、#id')与document.getElementsByName('name值')能达到一样的效果，代码将用前者造轮子
         * 缺点：操作需要循环去定位然后在操作
         * checkbox常见操作与radio常见操作都一样
         */
        var checkboxObj = document.querySelectorAll('.checkbox');
        for(var i = 0;i < checkboxObj.length;i++){
            if(checkboxObj[i].checked == true){
                console.log(checkboxObj[i].value);//获取选中的值
                checkboxObj[i].checked = false;//设置取消选中
            }else{
                checkboxObj[i].checked = true;//设置选中
            }
        }